<template>
	<view class="wodesss">
		<view class="article-top">
			<view class="article-search">
				<input placeholder-class="placeholder-color" placeholder="商品搜索" v-model="search_text" @input="search()" @confirm="search()" />
				<text class="iconfont iconIcon_search" style="font-size: 50rpx;" @click="search"></text>
			</view>
		</view>

		<view class="list-cate">
			<view v-for="(item, statusIndex) in statusList" :key="statusIndex" @click="ontabtap(item.id)" :data-current="statusIndex"
				:id="item.id" :class="{ selected: item.id == enter_status }">
				<text>{{ item.name }}</text>
			</view>
		</view>
		<view class="wodesss_body">

			<mescroll-uni ref="mescroll" @getData="getData" :top="220">

				<block slot="list">
					<block v-if="dataList.length">
						<view class="wodesss_body_sad" v-for="(item, index) in dataList" :key="index">
							<view class="wodesss_list" @click="chsudw(item.enter_id)">
								<text class="wodesss_list_sj">{{ $util.timeStampTurnTime(item.enter_time) }}</text>
								<text class="wodesss_list_chen">{{ item.enter_status_name }}</text>
								<view class="wodesss_list_i"></view>
								<image class="wodesss_list_img" :src="$util.img(item.sku_image.split(',')[0])" mode=""></image>
								<text class="wodesss_list_wenzi">{{ item.pintuan_name }}</text>
								<view class="wodesss_list_block">竞标等级{{ item.bidding_level + 1 }}</view>
								<view class="wodesss_list_wu">{{ item.bidding_level_rule[item.bidding_level].pintuan_num }}人团</view>
								<view class="wodesss_list_qian">
									¥
									<text class="price">{{ item.price }}</text>
								</view>
							</view>
						</view>
					</block>
					<block v-else>
						<ns-empty text="暂无数据" :isIndex="!1"></ns-empty>
					</block>
				</block>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			dataList: [],
			order: '全部',
			enter_status: '',
			keywords: '',
			search_text:'',
			statusList :[{
					name: '全部',
					id: ''
				},
				{
					name: '待审核',
					id: '0'
				},
				{
					name: '审核成功',
					id: '1'
				},
				{
					name: '审核失败',
					id: '2'
				}
			]
		};
	},
	
	
	onShow() {
		// 刷新多语言
		this.$langConfig.refresh();
	},

	methods: {
		getData(mescroll) {

			this.$api.sendRequest({
				url: '/platformpintuan/api/pintuanbidding/enterpage',
				data: {
					page_size: mescroll.size,
					page: mescroll.num,
					enter_status: this.enter_status,
					keywords: this.keywords
				},
				success: res => {
					let newArr = [];
					console.log(res);
					let msg = res.message;
					if (res.code == 0 && res.data) {
						newArr = res.data.list;
					} else {
						this.$util.showToast({
							title: msg
						});
					}
					mescroll.endSuccess(newArr.length);
					//设置列表数据
					if (mescroll.num == 1) this.dataList = []; //如果是第一页需手动制空列表
					this.dataList = this.dataList.concat(newArr); //追加新数据
			
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				},
				fail: res => {
					mescroll.endErr();
					if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				}
			});
		},

		// tab切换,改变筛选条件
		ontabtap(e) {
			this.enter_status = e;
			this.$refs.mescroll.refresh();
		},

		search() {
			this.keywords = this.search_text
			this.$refs.mescroll.refresh();
		},
		chsudw(btn_id) {
			this.$util.redirectTo('/promotionpages/platformpintuan/enter_detail/enter_detail?enter_id=' + btn_id);
		}
	},
};
</script>

<style lang="scss">
	.wodesss {
		font-family: PingFang-SC-Medium;

		.article-top {
			width: 100%;

			background-color: #ffffff;
			padding: 2rpx 32rpx 20rpx 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.article-add-brand {
				width: 152rpx;
				height: 72rpx;

				button {
					width: 152rpx;
					height: 72rpx;
					margin: 0;
					padding: 0;
					border-radius: 36rpx;
					text-align: center;
					line-height: 72rpx;
					background-color: rgba(67, 133, 255, 0.1);
					color: #4385ff;
				}
			}

			.article-search {
				width: 100%;
				height: 72rpx;
				//background-color: #000;
				background-color: #f8f8f8;
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				border-radius: 36rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				text {
					color: #cccccc;
					font-size: 30rpx;
					margin-left: 16rpx;
				}

				input {
					flex: 1;
					font-size: 28rpx;
				}

				.placeholder-color {
					color: #cccccc;
				}
			}
		}

		.list-cate {
			width: 100%;
			border-bottom: 1rpx solid #eeeeee;
			padding: 34rpx 30rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #ffffff;

			view {
				height: 60rpx;

				text {
					font-size: 30rpx;
					line-height: 1;
					vertical-align: top;
					color: #303133;
					border-bottom: 4rpx solid #ffffff;
				}

				&.selected {
					border-bottom: 4rpx solid #ff4544;

					text {
						color: #ff4544;
					}
				}
			}
		}

		.wodesss_body {
			margin: 0 30rpx 0 30rpx;

			.wodesss_body_sad {
				margin: 30rpx 30rpx 0 30rpx;

				.wodesss_list {
					padding-top: 20rpx;
					background-color: #ffffff;
					height: 356rpx;
					position: relative;
					display: flex;
					border-radius:12rpx;

					.wodesss_list_sj {
						font-weight: 500;
						margin: 0 0 0 31rpx;
						font-size: 28rpx;
					}

					.wodesss_list_chen {
						position: absolute;
						right: 31rpx;
						color: #ff4544;
						display: inline-block;
					}

					.wodesss_list_i {
						width: 91%;
						position: absolute;
						top: 92rpx;
						left: 30rpx;
						height: 2rpx;
						background-color: #eeeeee;
					}

					.wodesss_list_img {
						flex-direction: row;
						width: 182rpx;
						height: 182rpx;
						//background-color: red;
						position: absolute;
						border-radius: 12rpx;
						top: 130rpx;
						left: 32rpx;
					}

					.wodesss_list_wenzi {
						width: 428rpx;
						height: 68rpx;
						display: flex;
						position: absolute;
						top: 132rpx;
						left: 234rpx;
						display: inline-block;
						line-height: 1;
					}

					.wodesss_list_block {
						border: 2rpx solid #ff4544;
						color: #ff4544;
						position: absolute;
						top: 218rpx;
						left: 230rpx;
						text-align: center;
						font-size:24rpx;
						line-height: 36rpx;
						padding:0 8rpx;
						border-radius:4rpx;
					}

					.wodesss_list_wu {
						font-weight: 500;
						color: #ff4544;
						border: 2rpx solid #ff4544;
						position: absolute;
						top: 218rpx;
						left: 384rpx;
						text-align: center;
						font-size:24rpx;
						line-height: 36rpx;
						padding:0 8rpx;
						border-radius:4rpx;
					}

					.wodesss_list_qian {
						height: 24rpx;
						color: #ff4544;
						position: absolute;
						top: 278rpx;
						left: 234rpx;
						font-size: 24rpx;

						.price {
							padding-left: 10rpx;
							font-size: 32rpx;
						}
					}

					.wodesss_list_img_w {
						width: 62rpx;
						height: 24rpx;
						background-color: #ff4544;
						position: absolute;
						top: 288rpx;
						left: 360rpx;
					}
				}
			}
		}
	}
</style>
